<template>
  <div class="login-container">
    <!-- 每一个组件都应该有自己的根标签类名 -->
    <van-nav-bar title="登录">
      <template #left>
        <van-icon class="page-nav" style="color:#fff" name="cross"  @click="$router.back()" />
      </template>
    </van-nav-bar>
    <!-- 表单登录 -->
    <!-- 只要涉及表单 就要考虑表单验证 -->
    <van-form @submit="onSubmit" ref="loginForm">
      <van-field
        v-model="user.mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        :rules="userFormRules.mobile"
      >
        <template #left-icon>
          <i class="toutiao toutiao-shouji"></i>
        </template>
      </van-field>
      <van-field
        v-model="user.codeSms"
        type="password"
        name="codeSms"
        label="验证码"
        placeholder="验证码"
        :rules="userFormRules.codeSms"
      >
        <template #left-icon>
          <i class="toutiao toutiao-yanzhengma"></i>
        </template>
        <template #button>
          <!-- 倒计时控件 -->
          <!-- format属性可以格式化页面展示的文本
                  finish自定义事件可以在倒计时结束以后自动触发 -->
          <van-count-down
            :time="time"
            format="ss 秒"
            v-if="isCountDownShow"
            @finish="isCountDownShow = false"
          />
          <van-button
            v-else
            size="small"
            type="default"
            round
            class="send-sms-btn"
            native-type="button"
            @click="onSendSms"
            >发送验证</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit" class="submitBtn"
          >登录</van-button
        >
      </div>
    </van-form>
    <span style="font-size: 16px">账号： 13911111111 密码： 246810</span>
  </div>
</template>

<script>
// 在使用vant组件的全部引入方式后,可以在去全局的template模板中,直接使用vant标签
// 当需要使用的vant的一些功能方法(js)时,可以选择使用this.$方法名称(官方文档上显示的是大写方法,而使用$时需要首字母小写)
// 如果在使用this.$方法时,系统仍然报错.使用按需引入的方法去把方法引入到当前组件中---import {需要使用的方法} from 'vant'
import { loginAPI, getSmsCodeAPI } from '../../api/index.js'
import { Toast } from 'vant'

export default {
  name: 'loginIdex',
  data () {
    return {
      // 在一个form表单中,或者是相关联的多个表单变量时,建议放到一个对象中
      user: {
        mobile: '',
        codeSms: ''
      },
      userFormRules: {
        mobile: [
          { required: true, message: '请填写用户名' },
          { pattern: /^1[3578]\d{9}$/, message: '手机格错误' }
        ],
        codeSms: [
          { required: true, message: '请填写密码' },
          { pattern: /^\d{6}$/, message: '验证码格式错误' }

        ]
      },
      time: 5 * 1000, // 倒计时时长
      isCountDownShow: false // 是否展示倒计时按钮的转态
    }
  },
  // 制作手机验证码请求:
  // 1. 取消表单内部发送验证码按钮的提交表单事件,并绑定发送验证码请求的方法
  // 2. 当触发验证码事件时,需要切换到计时器组件,来阻止重复的验证码请求
  // 3. 当倒计时结束后,通过@finish事件,将按钮重新展示
  // 4. 通过验证码接口发来短信,当失败针对不同点额错误信息,做不同的提示
  methods: {
    // 发送验证码请求
    async onSendSms () {
      try {
        // 验证手机号的格式是否正确
        // 1. 给form表单设置ref来调用内部的方法  2. 调用validate方法来验证手机格式  3. 调用发送验证码接口
        await this.$refs.loginForm.validate('mobile')

        // 当调用接口成功/验证手机号成功,才显示倒计时
        this.isCountDownShow = true
        // 调用发送验证码请求
      } catch (error) {
        // 当出现验证错误时,因为手机号码验证的错误格式和接口返回的数据格式不同,就不建议写在一起
        // 当失败时,不希望继续执行后续的代码,直接return
        console.log(error)
        return // 阻止失败后,后续代码的执行
      }

      // 调用接口,请求验证码
      try {
        // 当不需要用到当前接口的返回值时,可以直接用await调用接口,不必赋值
        await getSmsCodeAPI(this.user.mobile)
        Toast.success('发送成功')
      } catch (error) {
        // 当失败时,关闭倒计时
        this.isCountDownShow = false
        if (error.response.status === 429) {
          Toast.fail('操作过于频繁,请稍后再试')
        } else {
          Toast.fail('网络异常,请稍后再试')
        }
      }
    },
    // 登录
    async onSubmit () {
      // .success .fail 可以主动的关闭 .loading 加载转态 使用Toast.clear() 方法也可以主动的去关闭加载状态,但是往往这个方法会被成功或失败取代
      Toast.loading({
        duration: 0, // 持续展示加载状态弹框的毫秒数 当是设置为0时,表示持续加载,需要主动关闭
        message: '加载中...', // 加载提示文本
        forbidClick: true // 是否禁止背景点击
      })
      // vant自带的submit事件携带了输入的信息
      try {
        // 当用户主动触发了一次接口请求时,需要再接口返回数据之前禁用他进行下一次的请求操作
        // 1. 在访问接口钱禁用下一次接口的调用
        // 2. 接口返回数据后,表明已访问完成,开放下一次接口调用
        // 今天使用toast轻提示框的加载功能来实现禁用页面上其他控件的点击事件
        const res = await loginAPI({
          mobile: this.user.mobile,
          code: this.user.codeSms
        })
        console.log('登录成功', res)
        this.$router.back()
        // 调用Vuex中的方法,将接口返回的token相关参数保存到状态管理器中
        // 通过this.$store.commit的方式调用mutations中定义的方法
        this.$store.commit('setUser', res.data.data)
        Toast.success('登录成功')
      } catch (error) {
        // 通过if判断错误信息的不同
        if (error.response.status === 400) {
          console.log('手机号或验证码输入错误', error)
          Toast.fail('手机号或验证码输入错误')
        } else {
          console.log('登录失败,网络异常,稍后再试', error)
          Toast.fail('登录失败,网络异常,稍后再试')
        }
      }
    }
  }

}
</script>

<style lang="less" scoped>
/*
    场景： 如果css样式设置后在页面上不生效时
    1. 看一下控制台中设置的样式是否被划掉（被覆盖），如果覆盖了，考虑样式优先级
    2. 观察复合选择器是否书写正确
    3. 因为我们修改的时第三方组件的样式，可能会导致样式无法影响，可以使用 样式穿透 -/deep/ :deep(类名)
  */
.login-container {
  .submitBtn {
    background-color: #6fb3fa;
    border: none;
  }
  .toutiao {
    font-size: 38px;
  }
  .send-sms-btn {
    background-color: #ededed;
    color: #666;
  }

   .van-nav-bar .van-icon {
    color: #fff;
   }

}
</style>
